<template>
  <div>
    <el-backtop :bottom="60"></el-backtop>
    <Myheader :class="{'navBarWrap':navBarFixed}"></Myheader>
    <div id="content">
      <transition name="slide-fade">
        <router-view name="content"></router-view>
      </transition>
    </div>
    <Myfooter></Myfooter>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      navBarFixed: false
    };
  },
  components: {},
  methods: {
    watchScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //  当滚动超过 50 时，实现吸顶效果
      if (scrollTop > 50) {
        this.navBarFixed = true;
      } else {
        this.navBarFixed = false;
      }
    }
  },
  mounted() {
    let that = this;
    that.minHeight = document.documentElement.clientHeight;
    window.addEventListener("scroll", that.watchScroll);
    window.onresize = function() {
      that.minHeight = document.documentElement.clientHeight;
    };
  }
};
</script>
<style scoped>
.app {
  font-family: "microsoft yahei";
}
.slide-fade {
  position: absolute;
  left: 0;
  right: 0;
}
.slide-fade-enter-active {
  transition: all 1.2s ease;
}
.slide-fade-leave-active {
  transition: all 0.1s cubic-bezier(2, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  left: 0;
  right: 0;
  transform: translateX(50px);
  opacity: 0;
}
#content {
  background-color: #f9f9f9;
  padding: 30px 0;
  min-height: 700px;
  height: 100%;
  width: 100%;
}
.navBarWrap {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
}
.wraper {
  height: 100vh;
  overflow-x: hidden;
}
</style>